<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath();
    request.setAttribute("basePath", basePath); // 将BasePath的内容保存在application属性之中
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <base href="<%=basePath%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8 ;"/>
    <title>祥利百悦</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script><!--日历插件-->
    <script type="text/javascript" src="js/jquery.ptTimeSelect.js"></script><!--日历插件-->
    <script type="text/javascript" src="js/pickday.js"></script><!--日历插件配置和调用-->
    <script type="text/javascript" src="js/WdatePicker.js"></script><!--日历插件配置和调用-->
    <script type="text/javascript">
    </script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/welcome.css"/>
    <link rel="stylesheet" href="css/jquery.ptTimeSelect.css"/><!-- 日历样式 -->
    <link rel="stylesheet" href="css/validationEngine.jquery.css"/><!--表单验证css-->
    <link rel="stylesheet" href="css/joyride-2.1.css"/>

</head>

<body>
<!--=======弹框开始=========-->
<!--遮罩层-->
<div class="zhy_zhezhao_pop"></div>
<!--遮罩层 end-->

<div class="zhy_popa sitepop">
    <p class="color66">服务站选择
        <span class="pull-right close_icon" onclick="clearChosenSt()"> </span>
    </p>
    <div class="col-xs-12 col-sm-12">
        <form class="form-inline" role="form">
            <div class="form-group">
                <div id="jsAddress_0" class="selectbox_s">
                    <input type="hidden" class="province" value="-1"/>
                    <input type="hidden" class="city" value="-1"/>
                    <input type="hidden" class="area" value="-1"/>
                    <span class="" for="">省份：</span>
                    <div name="province" type="selectbox" class="btn-group inline "></div>
                    <span class="" for="">城市：</span>
                    <div name="city" type="selectbox" class="btn-group inline"></div>
                    <span class="" for="">区县：</span>
                    <div name="area" type="selectbox" class="btn-group inline"></div>
                </div>
                <div class="inline">
                    <button type="button" class="btn btn_white20" onclick="loadStation()">搜索</button>
                </div>
            </div>
        </form>
        <div class="row mt20">
            <div class="arrow-right"></div>
            <div class="pull-left col-xs-6 col-sm-6">
                <p class="text-left">选择站点</p>
                <ul class="list-group choose-list">
                    <c:if test="${!empty stations}">
                        <c:forEach items="${stations}" var="st">
                            <li class="list-group-item" onclick="addSite(this)">清河服务站<input type="hidden"
                                                                                            value="${st.serverStationCode}"/>
                            </li>
                        </c:forEach>
                    </c:if>
                </ul>
            </div>
            <div class="pull-left col-xs-6 col-sm-6">
                <p class="text-left">已选站点</p>


                <ul class="list-group choosed-list" id="chosenSt">
                    <c:if test="${!empty chosenStations}">
                        <c:forEach items="${chosenStations}" var="st">
                            <li class="list-group-item">昌平服务站<input type="hidden" value="${st.serverStationCode}"/><span
                                    class="badge cancel_icon" onclick="cancelSite(this)"></span></li>
                        </c:forEach>
                    </c:if>
                </ul>
            </div>
        </div>
        <div class="operate_btn pull-right">
            <button type="button" class="btn cancle_yes" onclick="showSite()">确定</button>
            <button type="button" class="btn cancle_btn" onclick="showSite()" style="margin-right:30px !important;">取消
            </button>
        </div>
    </div>
</div>


<!--创建账号成功弹出-->
<div class="zhy_popa create_zh_s " style="width: 450px;margin-left: -225px;">
    <p class="color66">温馨提示<span class="pull-right close_icon" onclick="hideEdit('${ctx}/pages/account/list.action')"></span>
    </p>
    <div class="pop_content text-center">
        <p>尊敬的${accountId}，您已成功创建账号<span id="createAccountName"></span></p>
        <p>默认登录密码： <font class="colorbg">123456</font></p>
        <p>请登录系统及时修改密码，保护账号安全</p>
        </p>
        <div class="operate_btn pull-right">
            <button type="button" class="btn cancle_yes" onclick="hideEdit('${ctx}/pages/account/list.action')">关闭</button>
        </div>
    </div>
</div>


<!--站点与角色提示框-->
<div class="zhy_popa create_fail " style="width: 450px;margin-left: -225px;">
    <p class="color66">温馨提示<span class="pull-right close_icon" onclick="hideEdit()"></span>
    </p>
    <div class="pop_content text-center">
        <p>sorry,【${loginName}】用户,您的提交被阻止!
        <p>请选择正确的服务站与角色信息！</p>
        </p>
        <div class="operate_btn pull-right">
            <button type="button" class="btn cancle_yes" onclick="hideEdit()">关闭</button>
        </div>
    </div>
</div>





<!--返回列表弹出弹出-->
<div class="zhy_popa gobackpop ">
    <p class="color66">温馨提示</p>
    <div class="pop_content">
        <p>是否保存当前页面已填写的内容？</p>
        <div class="operate_btn pull-right">
            <button type="button" class="btn cancle_yes" onclick="submitEvt()">保存</button>
            <button type="button" class="btn cancle_btn"
                    onclick="hideEdit('${ctx }/account/account${empty person ? "Index":"List"}')">不保存
            </button>
        </div>
    </div>
</div>
<!--实名认证用户没有权限-->
<div class="zhy_popa create_site_1 " style="width: 450px;margin-left: -225px;">
    <p class="color66">温馨提示<span class="pull-right close_icon" onclick="hidePop()"></span></p>
    <div class="pop_content text-center">
        <p>尊敬的${accountName}，您的账号创建权限已用完 </p>
        <p>如需创建更多的账号，请前往“应用市场”升级</p>
        <div class="operate_btn pull-right">
            <a class="btn cancle_yes" href="${ctx}/order/buyPage" onclick="window.parent.goMoudel('center_buy_auth')">去应用市场</a>
            <button type="button" class="btn cancel" onclick="hideEdit()">关闭</button>
        </div>
    </div>
</div>
<!--账号退出提示-->
<div class="zhy_popa logoutPop " style="width:350px;margin-left: -175px;">
    <p class="color66">温馨提示<span class="pull-right close_icon" onclick="hideEdit()"></span></p>
    <div class="pop_content">
        <p class="">${employeeTotal gt 0 ? '您的员工都已经有账号了，新增账号需要添加员工' : '您还没有添加员工，请先到员工管理处添加员工'}</p>
        <div class="operate_btn pull-right">
            <a class="btn cancle_yes" href="/cloud-live-web/employee/list"
               onclick="window.parent.goMoudel('employee_employee_man')">添加员工</a>

        </div>
    </div>
</div>
<!--弹框end-->
<!--=======弹框结束=========-->
<div class="main_content create_site">
    <div class="col-xs-12 col-sm-12">
        <div class="panel panel-default choose_block">
            <div class="panel-heading color333">创建账号
                <a class="btn btn_blueg2 pull-right" href="javascript:history.go(-1);">&lt;返回</a>
            </div>
            <div class="divider"></div>
            <div class="site_block member_block">
                <div class="well_head">
                    <div class="line"></div>
                    <span class="pull-left">基础信息</span>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" id="personForm" enctype="multipart/form-data">
                        <input name="empId" type="hidden" value="${employee.id}"/>
                        <table class="table table-bordered table_staff" width="100%">
                            <thead>

                            </thead>
                            <tbody>
                            <tr>
                                <td class="border_right" width="140px"><font class="colorred">*</font>员工姓名：</td>
                                <td class="border_right" width="365px">
                                    <input type="hidden" id="serverStationCode"/>
                                    <input type="text"
                                           class="form-control input200 validate[required,maxSize[8]]"
                                           id="personName"
                                           placeholder="请输入名字" value="沈康">
                                </td>
                                <td colspan="2" rowspan="5" style="text-align: left;">
                                    <div class="inline">
                                        <c:set var="defaultPortrait" scope="page" value="img/touxiang.jpg" ></c:set>
                                        <img id="empPortraitImg" src="img/touxiang.jpg" width="200px" height="254px" />
                                        <div id="wait_loading">
                                        </div>
                                        <input type="hidden" name="portrait" value="${employee.portrait}"/>

                                    </div>

                                    <div class="inline text-left relative">
                                        <input type="file" class="upload_hidden" id="empPortraitUpload"
                                               name="myFile" class="myfile" onchange="fileUpload()" multiple="multiple"/>
                                        <p class="color999 mb0 font12">（图片最大不超过2M）</p>
                                        <button type="button" class="btn btn_next">
                                            上传图片
                                        </button>
                                    </div>

                                    <span id="empPortraitErrorTip" class="colorred selectError"
                                          style="display: none;padding: 0px;"><em><img src="img/error_sm.png"/></em>请上传员工头像</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right"><font class="colorred">*</font>性别：</td>
                                <td class="border_right">
                                    <label class="label_radio ${empty employee.sex || employee.sex eq 1 ? 'r_on': ''}">
                                        <input id="sex" name="sex" type="radio" onclick="setupLabel()" value="1"
                                        ${empty employee.sex || employee.sex eq 1 ? 'checked': ''}> 男
                                    </label>
                                    <label class="label_radio ${employee.sex eq 0 ? 'r_on': ''}">
                                        <input id="woman" name="sex" type="radio" onclick="setupLabel()"
                                               value="0" ${employee.sex eq 0 ? 'checked': ''}> 女
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right"><font class="colorred">*</font>联系电话：</td>
                                <td class="border_right">
                                    <input type="text"
                                           class="form-control input200 validate[required,custom[mobile]]"
                                           id="phone" placeholder="该手机号作为企业APP账号" value="15222309920">
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right">座机号：</td>
                                <td class="border_right">
                                    <input type="text" class="form-control input200 validate[custom[phone]]" name="tel"
                                           placeholder="请输入座机号" value="">
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right">身份证号：</td>
                                <td class="border_right">
                                    <input type="text"
                                           class="form-control input200 validate[custom[new_chinaIdLoose,chinaIdLoose]]"
                                           name="idCard" placeholder="请输入18位身份证" value="654301199207122610" id="idCard"
                                           onblur="autoFillBirthdayAndSex()">
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <table class="table table-bordered table_staff" width="100%">
                            <thead>
                            <tr>
                                <td colspan="4">其他信息</td>
                            </tr>
                            </thead>
                            <tbody id="mustItems">
                            <tr>
                                <td class="border_right">紧急联系人：</td>
                                <td class="border_right">
                                    <input type="text" class="form-control input200 validate[maxSize[8]]"
                                           name="emergency_connector" placeholder="" value="">
                                </td>
                                <td class="border_right" width="150px">出生日期：</td>
                                <td>
                                    <div class="inline relative mr0">
                                        <input type="text" class="form-control input150 mr0 validate[]"
                                               input-type='date' value="" id="birthDate" name="birthDate"/><!--
												    endDate
												   id不要修改 -->
                                        <span class="date_icon"><i></i></span>
                                    </div>
                                </td>

                            </tr>
                            <tr>
                                <td class="border_right">紧急联系人电话：</td>
                                <td class="border_right">
                                    <input type="text" class="form-control input200 validate[custom[mobile]]"
                                           name="emergency_phone" placeholder="" value="">
                                </td>
                                <td class="border_right">员工角色：</td>
                                <td class="border_right" colspan="">
                                    <div class="btn-group inline mr0">
                                        <button id="role" name="personal_role" type="button"
                                                class="btn btn-default dropdown-text"
                                                style="width: 166px;"
                                                employeeTypeLast="${employee.employeeType}"
                                                employeeType="${employee.employeeType}"
                                                roleId="${employee.roleId}">
                                            请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu" id="empTypeUl">
                                            <input type="hidden" id="roleId" value="${employee.roleId }"/>

                                            <li><a href="javascript:void(0);" value="1">管理员</a></li>
                                            <li><a href="javascript:void(0);" value="2">护理师</a></li>
                                            <li><a href="javascript:void(0);" value="3">护工</a></li>
                                            <li><a href="javascript:void(0);" value="4">坐席</a></li>
                                            <li><a href="javascript:void(0);" value="5">财务</a></li>
                                        </ul>
                                    </div>
                                    <span class="colorred selectError" style="display: none;padding: 0px;"><em><img
                                            src="${res_uri}/img/error_sm.png"/></em>请选择人员角色</span>
                                </td>
                            </tr>


                            <tr>
                                <td class="border_right" width="140px"><font class="colorred"></font>民族：</td>
                                <td class="border_right" width="365px">
                                    <div class="btn-group inline">
                                        <button id="nationality" type="button" class="btn btn-default dropdown-text"
                                                style="width: 166px;" value="${employee.nationality}">请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0);" value="汉族">汉族</a></li>
                                            <li><a href="javascript:void(0);" value="满族">满族</a></li>
                                            <li><a href="javascript:void(0);" value="蒙古族">蒙古族</a></li>
                                            <li><a href="javascript:void(0);" value="回族">回族</a></li>
                                            <li><a href="javascript:void(0);" value="藏族">藏族</a></li>
                                            <li><a href="javascript:void(0);" value="壮族">壮族</a></li>
                                            <li><a href="javascript:void(0);" value="维吾尔族">维吾尔族</a></li>
                                            <li><a href="javascript:void(0);" value="朝鲜族">朝鲜族</a></li>
                                            <li><a href="javascript:void(0);" value="苗族">苗族</a></li>
                                            <li><a href="javascript:void(0);" value="彝族">彝族</a></li>
                                            <li><a href="javascript:void(0);" value="土家族">土家族</a></li>
                                            <li><a href="javascript:void(0);" value="哈萨克族">哈萨克族</a></li>
                                            <li><a href="javascript:void(0);" value="鄂伦春族">鄂伦春族</a></li>
                                            <li><a href="javascript:void(0);" value="赫哲族">赫哲族</a></li>
                                            <li><a href="javascript:void(0);" value="傣族">傣族</a></li>
                                            <li><a href="javascript:void(0);" value="哈尼族">哈尼族</a></li>
                                            <li><a href="javascript:void(0);" value="畲族">畲族</a></li>
                                            <li><a href="javascript:void(0);" value="俄罗斯">俄罗斯</a></li>
                                            <li><a href="javascript:void(0);" value="柯尔克孜族">柯尔克孜族</a></li>
                                            <li><a href="javascript:void(0);" value="景颇族">景颇族</a></li>
                                            <li><a href="javascript:void(0);" value="高山族">高山族</a></li>
                                            <li><a href="javascript:void(0);" value="布依族">布依族</a></li>
                                            <li><a href="javascript:void(0);" value="侗族">侗族</a></li>
                                            <li><a href="javascript:void(0);" value="瑶族">瑶族</a></li>
                                            <li><a href="javascript:void(0);" value="撒拉族">撒拉族</a></li>
                                            <li><a href="javascript:void(0);" value="白族">白族</a></li>
                                            <li><a href="javascript:void(0);" value="黎族">黎族</a></li>
                                            <li><a href="javascript:void(0);" value="傈僳族">傈僳族</a></li>
                                            <li><a href="javascript:void(0);" value="仡佬族">仡佬族</a></li>
                                            <li><a href="javascript:void(0);" value="拉祜族">拉祜族</a></li>
                                            <li><a href="javascript:void(0);" value="水族">水族</a></li>
                                            <li><a href="javascript:void(0);" value="佤族">佤族</a></li>
                                            <li><a href="javascript:void(0);" value="纳西族">纳西族</a></li>
                                            <li><a href="javascript:void(0);" value="羌族">羌族</a></li>
                                            <li><a href="javascript:void(0);" value="土族">土族</a></li>
                                            <li><a href="javascript:void(0);" value="仫佬族">仫佬族</a></li>
                                            <li><a href="javascript:void(0);" value="锡伯族">锡伯族</a></li>
                                            <li><a href="javascript:void(0);" value="达斡尔族">达斡尔族</a></li>
                                            <li><a href="javascript:void(0);" value="景颇族">景颇族</a></li>
                                            <li><a href="javascript:void(0);" value="毛南族">毛南族</a></li>
                                            <li><a href="javascript:void(0);" value="布朗族">布朗族</a></li>
                                            <li><a href="javascript:void(0);" value="塔吉克族">塔吉克族</a></li>
                                            <li><a href="javascript:void(0);" value="阿昌族">阿昌族</a></li>
                                            <li><a href="javascript:void(0);" value="普米族">普米族</a></li>
                                            <li><a href="javascript:void(0);" value="鄂温克族">鄂温克族</a></li>
                                            <li><a href="javascript:void(0);" value="怒族">怒族</a></li>
                                            <li><a href="javascript:void(0);" value="京族">京族</a></li>
                                            <li><a href="javascript:void(0);" value="基诺族">基诺族</a></li>
                                            <li><a href="javascript:void(0);" value="德昂族">德昂族</a></li>
                                            <li><a href="javascript:void(0);" value="保安族">保安族</a></li>
                                            <li><a href="javascript:void(0);" value="裕固族">裕固族</a></li>
                                            <li><a href="javascript:void(0);" value="乌兹别克族">乌兹别克族</a></li>
                                            <li><a href="javascript:void(0);" value="门巴族">门巴族</a></li>
                                            <li><a href="javascript:void(0);" value="塔塔尔族">塔塔尔族</a></li>
                                            <li><a href="javascript:void(0);" value="珞巴族">珞巴族</a></li>
                                            <li><a href="javascript:void(0);" value="东乡族">东乡族</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td class="border_right" width="150px">婚姻状况：</td>
                                <td>
                                    <div class="btn-group inline mr0">
                                        <button id="marriage" type="button" class="btn btn-default dropdown-text"
                                                style="width: 166px;" value="${employee.isMarried}">请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0);" value="0">未婚</a></li>
                                            <li><a href="javascript:void(0);" value="1">已婚</a></li>
                                            <li><a href="javascript:void(0);" value="2">离异</a></li>
                                            <li><a href="javascript:void(0);" value="3">丧偶</a></li>
                                            <li><a href="javascript:void(0);" value="4">同居</a></li>
                                            <li><a href="javascript:void(0);" value="5">分居</a></li>
                                            <li><a href="javascript:void(0);" value="6">未说明情况</a></li>
                                        </ul>
                                    </div>
                                    <span class="colorred selectError" style="display: none;padding: 0px;"><em><img
                                            src="${res_uri}/img/error_sm.png"/></em>请设置婚姻状况</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right">文化程度：</td>
                                <td class="border_right">
                                    <input type="hidden" value="请选择" id="whcd"/>
                                    <div class="btn-group inline">
                                        <button id="education_degree" type="button"
                                                class="btn btn-default dropdown-text" style="width: 166px;"
                                                value="${employee.educationDegree}">请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0);" value="研究生">研究生</a></li>
                                            <li><a href="javascript:void(0);" value="大学">大学</a></li>
                                            <li><a href="javascript:void(0);" value="大专">大专</a></li>
                                            <li><a href="javascript:void(0);" value="中专">中专</a></li>
                                            <li><a href="javascript:void(0);" value="高中">高中</a></li>
                                            <li><a href="javascript:void(0);" value="初中">初中</a></li>
                                            <li><a href="javascript:void(0);" value="小学">小学</a></li>
                                            <li><a href="javascript:void(0);" value="文盲半文盲">文盲半文盲</a></li>
                                        </ul>
                                    </div>
                                    <span class=" colorred selectError" style="display: none;padding: 0px;"><em><img
                                            src="${res_uri}/img/error_sm.png"/></em>请选择一项</span>
                                </td>
                                <td class="border_right">政治面貌：</td>
                                <td>
                                    <div class="btn-group inline">
                                        <button id="politics_status" type="button" class="btn btn-default dropdown-text"
                                                style="width: 166px;" value="${employee.politicsStatus}">请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0);" value="1">中国共产党党员</a></li>
                                            <li><a href="javascript:void(0);" value="4">中国共产党预备党员</a></li>
                                            <li><a href="javascript:void(0);" value="2">中国共产主义青年团团员</a></li>
                                            <li><a href="javascript:void(0);" value="3">群众</a></li>
                                            <li><a href="javascript:void(0);" value="5">中国国民党革命委员会老人</a></li>
                                            <li><a href="javascript:void(0);" value="6">中国民主同盟盟员</a></li>
                                            <li><a href="javascript:void(0);" value="7">中国民主建国会老人</a></li>
                                            <li><a href="javascript:void(0);" value="8">中国民主促进会老人</a></li>
                                            <li><a href="javascript:void(0);" value="9">中国农工民主党党员</a></li>
                                            <li><a href="javascript:void(0);" value="10">中国致公党党员</a></li>
                                            <li><a href="javascript:void(0);" value="11">台湾民主自治同盟盟员</a></li>
                                            <li><a href="javascript:void(0);" value="12">无党派民主人士</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="border_right">入职时间：</td>
                                <td class="border_right">
                                    <div class="inline relative mr0">
                                        <input type="text" class="form-control input150 mr0 " input-type='date'
                                               name="induction" id="induction" value=""${employee.induction}"
                                        pattern="yyyy-MM-dd" />"
                                        /><!-- endDate id不要修改 -->
                                        <span class="date_icon"><i></i></span>

                                    </div>
                                </td>
                                <td class="border_right">职称：</td>
                                <td class="">
                                    <div class="btn-group inline">
                                        <button id="technical_title" type="button" class="btn btn-default dropdown-text"
                                                style="width: 166px;" value="${employee.technicalTitle}">请选择
                                        </button>
                                        <button type="button" class="btn btn-default dropdown-toggle">
                                            <span class="caret"></span>
                                            <span class="sr-only">切换下拉菜单</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0);" value="1">高级</a></li>
                                            <li><a href="javascript:void(0);" value="2">中级</a></li>
                                            <li><a href="javascript:void(0);" value="3">低级</a></li>
                                        </ul>
                                    </div>
                                </td>

                            </tr>
                            <tr>
                                <td class="border_right">合同开始时间：</td>
                                <td class="border_right">
                                    <div class="inline relative mr0">
                                        <input id="contract_start" type="text" class="form-control input150 mr0"
                                               input-type='dateAll' name="contract_start"
                                               value=""${employee.contractStart}" pattern="yyyy-MM-dd" />" />
                                        <!-- endDate id不要修改 -->
                                        <span class="date_icon"><i></i></span>
                                    </div>
                                </td>
                                <td class="border_right">合同编号：</td>
                                <td>
                                    <input type="text" class="form-control input200 validate[maxSize[30]]"
                                           name="contract_code" placeholder="" value="">
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right">合同结束时间：</td>
                                <td class="border_right">
                                    <div class="inline relative mr0">
                                        <input id="contract_end" type="text" class="form-control input150 mr0"
                                               input-type='dateAfter' name="contract_end"
                                               value="" ${employee.contractEnd}" pattern="yyyy-MM-dd" />" />
                                        <!-- endDate id不要修改 -->
                                        <span class="date_icon"><i></i></span>
                                    </div>
                                    <span class="colorred selectError" style="display: none;padding: 0px;"><em><img
                                            src="${res_uri}/img/error_sm.png"/></em>合同结束时间不能小于开始时间</span>
                                </td>

                            </tr>
                            <tr>
                                <td class="border_right">户籍地址：</td>
                                <td colspan="3">
                                    <div id="jsAddress_0" class="selectbox_l">
                                        <input name="register_province_code" type="hidden" class="province"
                                               value="${employee.registerProvinceCode}"/>
                                        <input name="register_city_code" type="hidden" class="city"
                                               value="${employee.registerCityCode}"/>
                                        <input name="register_area_code" type="hidden" class="area"
                                               value="${employee.registerAreaCode}"/>
                                        <div id="register_province" name="province" type="selectbox"
                                             class="btn-group inline "></div>
                                        <div id="register_city" name="city" type="selectbox"
                                             class="btn-group inline"></div>
                                        <div id="register_area" name="area" type="selectbox"
                                             class="btn-group inline"></div>
                                    </div>
                                    <div class=" inline">
                                        <input name="census_register_address" type="text"
                                               class="form-control inline validate[maxSize[20]]" style="width: 251px;"
                                               id="census_register_address" placeholder="详细地址" value="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="border_right">家庭地址：</td>
                                <td colspan="3">
                                    <div class="inline jsBlock mr0">
                                        <div id="jsAddress_1" class="selectbox_l">
                                            <input name="living_province_code" type="hidden" class="province"
                                                   value="${employee.livingProvinceCode}"/>
                                            <input name="living_city_code" type="hidden" class="city"
                                                   value="${employee.livingCityCode}"/>
                                            <input name="living_area_code" type="hidden" class="area"
                                                   value="${employee.livingAreaCode}"/>
                                            <div id="living_province" name="province" type="selectbox"
                                                 class="btn-group inline "></div>
                                            <div id="living_city" name="city" type="selectbox"
                                                 class="btn-group inline"></div>
                                            <div id="living_area" name="area" type="selectbox"
                                                 class="btn-group inline"></div>
                                        </div>
                                    </div>
                                    <div class="inline mr0">
                                        <input name="living_address" type="text"
                                               class="form-control validate[maxSize[20]]"
                                               style="width: 251px;display: inline-block;" id="living_address"
                                               placeholder="详细地址" value="">
                                    </div>
                                    <button class="btn btn_white20" type="button" style="vertical-align: 0px;"
                                            onclick="setSameAddress()">与户籍地址相同
                                    </button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="well_head">
                    <div class="line"></div>
                    <span class="pull-left">权限分配</span>
                </div>



                <div class="panel-body  other">
                    <form class="form-horizontal" role="form" id="accountForm">
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">角色选择：</label>
                            <div class="col-sm-10 favorite " id="personRole">
                                <c:forEach items="${roles}" var="role">
                                    <label class="label_check">
                                        <input id="${role.roleId}" name="role" type="checkbox" value="${role.roleId}"
                                               onclick="setupLabel()"> ${role.roleName}
                                    </label>
                                </c:forEach>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">站点选择：</label>
                            <c:choose>
                                <c:when test="${!empty chosenStations}">
                                    <div class="col-sm-10 txt ml15" id="multi_site_block">
                                        <div class="choosed-list-show">
                                            <div class="inline">清河服务站<i class="cancel_icon" onclick="removeSite(this)"
                                                                        value="清河服务站"></i></div>
                                        </div>
                                        <button type="button" class="btn_white2 margin10 site_add"
                                                onclick="deleteM(this,'sitepop')"><i></i>继续填加
                                        </button>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="col-sm-10 ml150" id="multi_site_block">
                                        <button type="button" class="btn_white2" onclick="deleteM(this,'sitepop')">
                                            服务站选择
                                        </button>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="form-group add_block">
                            <div class="divider"></div>
                            <div class=" col-sm-12 text-center">
                                <button type="button" class="btn btn_green" id="submitBtn"
                                        onclick="javascript:submitEvt();">保存
                                </button>
                                <button type="button" class="btn btn_whites"
                                        onclick='window.location.href="pages/account/list.action";'>取消
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<!--表单验证 s-->
<script type="text/javascript" src="js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>

<!-- json 工具 -->
<script type="text/javascript" src="js/json2.js"></script>

<!-- 省市区联动 js -->
<script type="text/javascript" src="js/jquery.ganged.js" type="text/javascript"></script>
<!--  省市区的json数据 -->
<script type="text/javascript" src="js/pro.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    var _emps = JSON.parse('{"employeeName":"A","idCard":"123456"}');

    function empBlurEvt(_this) {
        var thisVal = $.trim($(_this).val());
        if (thisVal != "") {//筛选
            var patt = new RegExp(thisVal + '');
            $("#empTb").empty().html($("<tr><td>姓名</td><td>手机号</td><td>性别</td></tr>"));
            $.each(_emps, function (i, val) {
                if (patt.test(val.employeeName) || patt.test(val.phone)) {
                    var _tr = '<tr onclick="setERelative(this)">'
                        + '<td>' + val.employeeName + '<input name="idCard" type="hidden" value="' + val.idCard + '"/></td>'
                        + '<td>' + val.phone + '<input name="empId" type="hidden" value="' + val.id + '"/></td>'
                        + '<td>' + (val.sex == 0 ? '女' : '男') + '<input name="sex" type="hidden" value="' + val.sex + '"/></td>'
                        + '</tr>';
                    $("#empTb").append($(_tr));
                }
            });
            $(".dropdown-menu-relative").show();
            return;
        }
        $("#empTb").empty().html($("<tr><td>姓名</td><td>手机号</td><td>性别</td></tr>"));
        $.each(_emps, function (i, val) {
            var _tr = '<tr onclick="setERelative(this)">'
                + '<td>' + val.employeeName + '<input name="idCard" type="hidden" value="' + val.idCard + '"/></td>'
                + '<td>' + val.phone + '<input name="empId" type="hidden" value="' + val.id + '"/></td>'
                + '<td>' + (val.sex == 0 ? '女' : '男') + '<input name="sex" type="hidden" value="' + val.sex + '"/></td>'
                + '</tr>';
            $("#empTb").append($(_tr));
        });
        showDRelative(_this);
    }

    function showDRelative(_this) {
        var trl = $(".dropdown-menu-relative").find("tr").length;
        var thisVal = $.trim($(_this).val());
        if (thisVal == "") {//当输入框有文字内容时，不去提示用户添加员工
            if (trl < 2) {
                showPopC(undefined, "logoutPop");
                return;
            }
        }
        setupLabel();
        $(".dropdown-menu-relative").show();
    }

    function setERelative(obj) {
        var l = $(obj).find("td").length,
            str = '';
        for (var i = 0; i < l; i++) {
            if (i < 2) {
                if (str != "") {
                    str += " , "
                    str += $(obj).find("td").eq(i).text();
                } else {
                    str += $(obj).find("td").eq(i).text();
                }
            }
        }
        $("#relative").val(str);
        $(".dropdown-menu-relative").hide();

        //
        $("#personName").val($(obj).find("td").eq(0).text());
        $("#phone").val($(obj).find("td").eq(1).text());
        $("#sex").val($(obj).find("td").eq(2).find("input").val());
        $("#idCard").val($(obj).find("td").eq(0).find("input").val());
        $("#empId").val($(obj).find("td").eq(1).find("input").val());

    }

    $(".dropdown-menu-relative").mouseleave(function () {
        $(".dropdown-menu-relative").hide();
    });
    //省市区联动 调用
    $('#jsAddress_0').ganged({'data': provinceList, 'selectAll': true, 'width': 111, 'height': 32});
    //****表单验证 ******
    $(".form-horizontal").validationEngine();



    //弹出创建成功消息框
    function showPopC(obj, className, id) {
        $(".zhy_zhezhao_pop").show();
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var this_h = $("." + className).height();
        var win_h = ($('html', parent.document).height() - this_h - 100) / 2
        $(".zhy_zhezhao_pop").height($("html").height());
        var this_h = $("." + className).height();
        top = top + win_h;
        $("." + className).css("top", top).show().siblings(".zhy_popa").hide();
    }

    //展示已选站点
    function showSite() {
        $("#multi_site_block").html("");
        $("#multi_site_block").addClass("txt ml15").removeClass("ml150");
        var div = $("<div class='choosed-list-show'></div>");
        var more = $("<a href='javascript:void(0);' onclick='showList()' class='new_link2'>更多<i class='arrow_d_icon_0'></i></a>");
        // var more_choose =$("<a href='javascript:void(0);' class='new_link2'>继续添加</a>");
        var more_choose = $('<button type="button" class="btn_white2 margin10 site_add" onclick="deleteM(this,\'sitepop\')" ><i></i>继续添加</button>')
        var len = $(".choosed-list li").length;//已选站点的长度
        var choosed_li = $(".choosed-list li")//被选站点
        for (var i = 0; i < len; i++) {
            if (parseInt(i / 6) == 0) { //每六个一行
                var choosed_input = $(choosed_li[i]).find("input");
                var li = $("<div class='inline'></div>");
                var i_cancle = $("<i class='cancel_icon' value='" + choosed_input.val() + "' onclick='removeSite(this)'></i>");
                li.text(choosed_li.eq(i).text());
                li.append(i_cancle);
                div.append(li);
                if (len > 6) {
                    div.append(more);//如果有第二行才加更多
                }
            }
        }
        $("#multi_site_block").append(div);
        $("#multi_site_block").append(more_choose);
        hideEdit()
    }

    // 移除展示站点
    function removeSite(obj) {
        $(obj).parent().remove();
        cancelSite($(".choosed-list li input[value=" + $(obj).attr("value") + "]").parent().find("span"));
        if ($(".new_link2").css('display') != 'none') {
            showSite()
        }
    }

    //展示  更多
    function showList() {
        var more_up = $("<a href='javascript:void(0);' onclick='hideList()' class='new_link2'>收起<i class='arrow_d_icon_1'></i></a>");
        var len = $(".choosed-list li").length;//已选站点的长度
        var choosed_li = $(".choosed-list li")//被选站点
        var row = parseInt((len - 6) / 6) + 1;//还剩几行没显示
        for (var j = 1; j <= row; j++) {
            var div = $("<div class='choosed-list-show'></div>");
            div.css('marginTop', "10px");
            for (var i = j * 6; i < len; i++) {
                if (parseInt(i / 6) == j) { //每六个一行
                    var choosed_input = $(choosed_li[i]).find("input");
                    var li = $("<div class='inline'></div>");
                    var i_cancle = $("<i class='cancel_icon' value='" + choosed_input.val() + "' onclick='removeSite(this)'></i>");
                    li.text(choosed_li.eq(i).text());
                    li.append(i_cancle);
                    div.append(li);
                    div.append(more_up);//最后一行加收起
                }
            }
            $("#multi_site_block .choosed-list-show:last").after(div);//添加到下一行
        }
        // $("#multi_site_block .choosed-list-show:last").after(div);//添加到下一行
        $("#multi_site_block .choosed-list-show:first").find(".new_link2").hide();
    }

    //展示  收起
    function hideList() {
        showSite();
        /*$(".choosed-list-show:gt(0)").remove();//除第一行外其其他行隐藏
        $("#multi_site_block .choosed-list-show:first").find(".new_link2").show();*/
    }

    //清除右侧已经选择的站点
    function clearChosenSt() {
        //
        window.location = "";
    }

    function loadStation() {
        var province = $("div[name=province] input[name=province]").val();
        var city = $("div[name=city] input[name=city]").val();
        var area = $("div[name=area] input[name=area]").val();
        $.ajax({
            type: "POST",
            url: "pages/account/list_station.action",
            dataType: "json",
            //contentType:"application/json",
            data: {
                "province": province,
                "city": city,
                "area": area,
                "pageSize": "10000"
            },
            success: function (dataStr) {
                $(".choose-list").empty();

                var choosed = $(".choosed-list li input");
                var map = {};
                for (var i = 0; i < choosed.length; i++) {
                    map[$(choosed[i]).val()] = 1;
                }
                var stations = dataStr.serviceStations;
                if (stations != null && stations.length > 0) {
                    for (var i = 0; i < stations.length; i++) {
                        if (map[stations[i].serverStationCode] == "1") {
                            continue;
                        }
                        var $li = $('<li class="list-group-item" onclick="addSite(this)">' + stations[i].serverStationName + '</li>');
                        $li.append('<input type="hidden" value="' + stations[i].serverStationCode + '"/>');
                        $(".choose-list").append($li)

                    }
                }
            }
        });
    }




    function addSite(obj) {
        $(obj).remove();//移除被选择项
        var str = $(obj).html();
        var $li = $("<li  class='list-group-item'></li>");
        var $span = $('<span class="badge cancel_icon" onclick="cancelSite(this)"></span>');
        $li.html(str);
        $span.appendTo($li);
        $(".choosed-list").prepend($li);
    }

    function cancelSite(obj) {
        var str = $(obj).parent().text();//添加取消项
        var stationCode = $(obj).parent().find("input");
        var $li = $('<li class="list-group-item" onclick="addSite(this)">' + str + '</li>');//添加取消项
        $li.append(stationCode);
        $(".choose-list").append($li)//添加取消项
        $(obj).parents("li").remove();
    }

    //显示弹框
    function deleteM(obj, className, id) {
        $(".zhy_zhezhao_pop").height($("html").height());
        $(".zhy_zhezhao_pop").show();
        var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容scrolltop写法
        var win_h = $(window).height();
        var this_h = $("." + className).height();
        var cha = win_h - this_h;
        if (cha > 0) {
            top += cha / 2;
        } else {
            top += 0;
        }
        $("." + className).css("top", top).show();
    }

    // 隐藏修改弹框
    function hideEdit(url) {
        $(".zhy_zhezhao_pop").hide();
        $(".zhy_popa").hide();
        if (url) {
            window.location.href = url;
        }
    }

    function submitEvt() {
        hideEdit();
        if(!$("#personForm").validationEngine("validate")) return ;

        $('#submitBtn').attr('disabled', "true");
        //账户角色
        var _personRoles = [];
        //遍历所有的角色
        $("#personRole").find(":checked").each(function (i, roleInput) {
            _personRoles.push({"roleId": $(roleInput).val()});
        });
        var _psersonStation = [];
        $("#chosenSt li").each(function (i, liE) {
            _psersonStation.push({"serverStationCode": $(liE).find("input").val()});
        });



        if(_personRoles.length!=1 || _psersonStation.length!=1){
            $('#submitBtn').attr('disabled', false);
            showPopC(undefined, "create_fail");
            return ;
        }



        //账户信息
        var _person = {
            "name": $.trim($("#personName").val()),
            "phone": $.trim($("#phone").val()),
            "sex": $("input[name='sex']:checked").val(),
            "idCard": $("#idCard").val(),
            "birthday": $("#birthDate").val(),
            "liveAddress": $("input[name='living_address']").val(),
            "censusRegisterAddress": $("input[name='census_register_address']").val(),
            "createTime":$("#induction").val(),
           // "serverStationCode": _psersonStation[0],
            "emergencyContactName": $("input[name='emergency_connector']").val(),
            "emergencyContactPhone": $("input[name='emergency_phone']").val(),
            "birthday": $("#birthDate").val(),
            "personalRole": $("#role").val(),
            "nation": $("#nationality").val(),
            "cultureDegree": $("#education_degree").val(),
            "maritalStatus": $("#marriage").val(),
            "politicalStatus": $("#politics_status").val(),
            "induction": $("input[name='induction']").val(),
            "contractStart": $("#contract_start").val(),
            "contractEnd": $("#contract_end").val(),
            "portrait":$("#empPortraitImg")[0].src
            //"roleId":$(roleInput).val()
        };

        console.log(_person) ;
        console.log(_personRoles[0]) ;
        console.log(_psersonStation[0]) ;

        var data0 = $.extend({}, _personRoles[0], _psersonStation[0]);
        var data =$.extend({}, data0, _person);
        console.log(data) ;


        $.ajax({
            type: "POST",
            url: "pages/account/add.action",
            dataType: "json",
            //contentType:"application/json",
            data: data ,
            success: function (dataStr) {

                if(dataStr == true){
                    showPopC(undefined, "create_zh_s");
                } else {
                    window.location="pages/account/error.action"
                }
            }
        });


    }

    var cantCreate = '${cantCreate}';
    if (cantCreate == 'true') {
        showPopC(this, 'create_site_1');
    }

    function autoFillBirthdayAndSex() {
        getInfo();
    }


    function checkId(pId) {
        //检查身份证号码
        var arrVerifyCode = [1, 0, "x", 9, 8, 7, 6, 5, 4, 3, 2];
        var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        var Checker = [1, 9, 8, 7, 6, 5, 4, 3, 2, 1, 1];
        if (pId.length != 15 && pId.length != 18) return "身份证号共有15位或18位";
        var Ai = pId.length == 18 ? pId.substring(0, 17) : pId.slice(0, 6) + "19" + pId.slice(6, 16);
        if (!/^\d+$/.test(Ai)) return "身份证除最后一位外，必须为数字！";
        var yyyy = Ai.slice(6, 10), mm = Ai.slice(10, 12) - 1, dd = Ai.slice(12, 14);
        var d = new Date(yyyy, mm, dd), now = new Date();
        var year = d.getFullYear(), mon = d.getMonth(), day = d.getDate();
        if (year != yyyy || mon != mm || day != dd || d > now || year < 1800) return "身份证输入错误！";
        for (var i = 0, ret = 0; i < 17; i++) ret += Ai.charAt(i) * Wi[i];
        Ai += arrVerifyCode[ret %= 11];
        return pId.length == 18 && pId != Ai ? "身份证输入错误！" : Ai;
    };

    //根据身份证取 省份,生日，性别
    function getInfo() {
        //获取输入身份证号码
        var ic = $("#idCard").val();
        ic = checkId(ic);

        if (isNaN(ic)) {
            $("#birthDate").val("");
            $("#idCard").val("");
            alert("非法身份证,请重新输入！");
            return;
        }
        var ic = String(ic);
        //获取出生日期
        var birth = ic.substring(6, 10) + "-" + ic.substring(10, 12) + "-" + ic.substring(12, 14);
        $("#birthDate").val(birth);
        //获取性别


        var gender = ic.slice(14, 17) % 2 ? "1" : "2"; // 1代表男性，2代表女性
        var sexOption = document.getElementsByName("sex");
        for (var i = 0; i < sexOption.length; i++) {
            if (sexOption[i].value == gender) {
                sexOption[i].checked = true;
                break;
            }
        }
        // //获取年龄
        // var myDate = new Date();
        // var month = myDate.getMonth() + 1;
        // var day = myDate.getDate();
        // var age = myDate.getFullYear() - ic.substring(6, 10) - 1;
        // if (ic.substring(10, 12) < month || ic.substring(10, 12) == month && ic.substring(12, 14) <= day) {
        //     age++;
        // }
        // $("#").val(age);
    }

    function fileUpload() {
        jQuery.noConflict();
        console.log("yibu变化");
        //var formDate = new FormData($("#empPortraitUpload"));
        // 上传设置
        var options = {
            // 规定把请求发送到那个URL
            url: "pages/account/empPortraitUpload.action",
            // 请求方式
            type: "post",
            // 服务器响应的数据类型
            dataType: "json",
            // 请求成功时执行的回调函数
            success: function(data) {
                // 图片显示地址
                //$("#allUrl").attr("src", data.path);
                $("#empPortraitImg").attr("src", "http://"+data.url+"?rnd=" + Math.random());


            }
        };

        $("#personForm").ajaxSubmit(options) ;

    }

</script>
